<template>
  <div class='container'>
    <div class="table-container" style="height: 100%;">
      <base-table :tableModel="alarmRecordList" :tableItemConfig="alarmRecordListConfig" stripe v-loading="alarmRecordListLoading" height="650px">
        <template v-slot:slotAlarmStatus="{ scope, obj }">

          <!-- <div class="status-content" v-if="(scope.row.alarmStatus == 0 || scope.row.alarmStatus == 5) && item.value == scope.row.alarmStatus" :key="scope.row.alarmId"> -->
          <!-- <div class="status-content" v-if="(scope.row.alarmStatus == 0 && item.value == 0)" :key="scope.row.alarmId">
            <span :class="'status-radius-alarm-' + scope.row.alarmStatus"></span>
            <span :class="'status-alarm-label-' + scope.row.alarmStatus">{{ item.label + (scope.row.alarmStatus == item.value) + typeof scope.row.alarmStatus + "," + typeof item.value  }}</span>
          </div>

          <div class="status-content" v-else>
            <span class="status-radius-alarm-1"></span>
            <span class="status-alarm-label-1">{{ item.label + (scope.row.alarmStatus + ':' + item.value) + typeof scope.row.alarmStatus + "," + typeof item.value }}</span>
          </div> -->

          <div class="status-content">
            <span :class="'status-radius-alarm-' + setAlarmStatus(scope.row.alarmStatus)"></span>
            <span :class="'status-alarm-label-' + setAlarmStatus(scope.row.alarmStatus)">{{ setAlarmStatus(scope.row.alarmStatus, 'label') }}</span>
          </div>

        </template>
      </base-table>
      <!-- 分页 -->
      <Pagination v-show="total > 0" :total="total" :page.sync="searchMap.pageNum" :limit.sync="searchMap.pageSize" small @change="getListAlarm"></Pagination>
      <!-- 分页over -->
    </div>
  </div>
</template>

<script>
import { listAlarm } from '@/api'
export default {
  name: "AlarmRecord",
  props: {
    value: {
      type: Object,
      require: true
    },
    dictMap: {
      type: Object,
      default: () => { },
    },
  },
  data() {
    return {
      searchMap: {
        pageNum: 1,
        pageSize: 10
      },

      // 告警记录
      alarmRecordList: [],
      // 告警记录表格配置
      alarmRecordListConfig: [
        {
          prop: 'createTime',
          label: '告警开始时间'
        },
        {
          prop: 'updateTime',
          label: '最新告警时间'
        },
        {
          prop: 'alarmReason',
          label: '告警信息'
        },
        {
          prop: 'alarmStatus',
          label: '处理状态',
          slotName: "slotAlarmStatus"
        },
        {
          prop: 'handleTime',
          label: '处理时间'
        },
        {
          prop: 'handleUserName',
          label: '处理人员'
        }
      ],
      // 告警记录加载状态
      alarmRecordListLoading: false,
      total: 0,
    };
  },
  computed: {},
  watch: {
    value: {
      handler(details) {
        this.getListAlarm()
      },
      immediate: true,
      deep: true,
    }
  },
  created() {

  },
  mounted() {

  },
  methods: {
    getListAlarm() {
      this.$nextTick(() => {
        listAlarm({
          ...this.searchMap,
          deptId: this.value.deptId,
          deviceId: this.value.deviceId
        }).then(res => {
          if (res && 200 == res.code) {
            this.alarmRecordList = res.rows
            // this.alarmRecordList
            this.total = res.total
          }
        })
      })
    },
    // 设置处理状态
    setAlarmStatus(status, type) {
      if (type) {
        return this.dictMap.type.alarm_type.filter(item => item.value == status)[0].label
      }
      // 0：待处理/5：已处理
      if (status == 0 || status == 5) {
        return status
      }
      // 1，2，3，4:处理中
      return 1
    }
  },
  components: {},
}
</script>

<style lang='less' scoped></style>